<template>
  <div class="p-4">
    <a-card :bordered="false" style="height: 100%">
      <a-tabs v-model:activeKey="activeKey" @change="tabChange">
        <a-tab-pane key="JeecgComponents" tab="下拉选择组件" />
        <a-tab-pane key="JCodeEditDemo" tab="代码编辑器" force-render />
        <a-tab-pane key="JEditorDemo" tab="富文本&MakeDown" />
        <a-tab-pane key="ImgDragSort" tab="图片拖拽" />
        <a-tab-pane key="ImgTurnPage" tab="图片翻页" />
        <a-tab-pane key="JeecgPdfView" tab="PDF预览" />
        <a-tab-pane key="JUploadDemo" tab="文件上传" />
      </a-tabs>
      <component :is="currentComponent" />
    </a-card>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed } from "vue"
  import JeecgComponents from "./JeecgComponents.vue"
  import JEditorDemo from "./JEditorDemo.vue"
  import JCodeEditDemo from "./JCodeEditDemo.vue"
  import ImgDragSort from "./ImgDragSort.vue"
  import ImgTurnPage from "./ImgTurnPage.vue"
  import JeecgPdfView from "./JeecgPdfView.vue"
  import JUploadDemo from "./JUploadDemo.vue"
  export default defineComponent({
    name: "CompLyBasic",
    setup() {
      const activeKey = ref("JeecgComponents")
      const currentComponent = computed(() => {
        const componentType = {
          JeecgComponents: JeecgComponents,
          JEditorDemo: JEditorDemo,
          JCodeEditDemo: JCodeEditDemo,
          ImgDragSort: ImgDragSort,
          ImgTurnPage: ImgTurnPage,
          JeecgPdfView: JeecgPdfView,
          JUploadDemo: JUploadDemo,
        }
        return componentType[activeKey.value]
      })

      //使用component动态切换tab
      function tabChange(key) {
        activeKey.value = key
      }
      return {
        activeKey,
        currentComponent,
        tabChange,
      }
    },
  })
</script>
